<template>
  <div style="padding: 30px">
    <baidu-map
      class="bm-view"
      ak="mcIAHs4mh2s8wLhWHTqOg1yt1BLHbxbd"
      map-type="BMAP_HYBRID_MAP"
      :center="mapcenter"
      :zoom="10"
    >
      <bm-circle
        v-for="(c, index) in circles"
        :key="index"
        :center="c.center"
        :radius="c.radius"
        stroke-color="blue"
        :stroke-opacity="0.8"
        :stroke-weight="1"
        fill-color="blue"
        :fill-opacity="0.1"
        :clicking="true"
        @click="clickCircle(index)"
      />
    </baidu-map>
    <div style="margin-left: 20px; margin-top: 20px">
      <div>当前选定挂载点</div>
      <label class="label">当前选定挂载点: </label>{{ selectmount.alias }}
      <label class="label">挂在源: </label>{{ selectmount.mount }}
      <label class="label">中心点GPS: </label>{{ selectmount.center }}
      <label class="label">系统ID: </label>{{ selectmount.id }}
      <label class="label">Lora模式 </label>{{ selectmount.loraChannel }}
      <label class="label">覆盖半径 </label>{{ selectmount.radius }}m
      <label class="label">可用状态 </label>{{ selectmount.status }}
    </div>
    <div style="margin-left: 20px; margin-top: 20px">
      <div>实时状态数据</div>
      <label class="label">设备ID: </label>{{ infodata.id }}
      <label class="label">时间: </label>{{ mqttdata.ts }}
      <label class="label">定位: </label>{{ mqttdata.g }}
      <label class="label">当前使用网络: </label>{{ infodata.curnet }}
      <label class="label">硬件版本: </label>{{ infodata.hwver }}
      <label class="label">软件版本: </label>{{ infodata.swver }}
      <label class="label">网卡1: </label>{{ infodata.net1 }}
      <label class="label">网卡2: </label>{{ infodata.net2 }}
      <label class="label">当前存储: </label>{{ infodata.emmc }}
      <label class="label">工作模式: </label>{{ infodata.mode }}
      <label class="label">Lora开关: </label>{{ infodata.rtcm }}
      <label class="label">Lora信道: </label>{{ infodata.lora }}
      <label class="label">板卡类型: </label>{{ infodata.gps }}
    </div>
  </div>
</template>

<script>
import { fetchSourceList } from '@/api/admin'
import mqtt from 'mqtt'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmCircle from 'vue-baidu-map/components/overlays/Circle.vue'
import moment from 'moment'

// import BmPointCollection from "vue-baidu-map/components/overlays/PointCollection";

export default {
  components: {
    BaiduMap,
    BmCircle
  },
  props: {},
  data() {
    return {
      mqttdata: {},
      selectmount: {},
      selecttopic: '',
      infodata: {},
      mapcenter: {},
      circles: []
    }
  },
  beforeCreate() {
    fetchSourceList().then((response) => {
      for (var i = 0, len = response.data.length; i < len; i++) {
        var data = response.data[i]
        // 设置地图中心点
        if (i === 0) {
          this.mapcenter = {
            lng: data.lng,
            lat: data.lat
          }
        }
        // 添加挂载点数据
        this.circles.push({
          alias: data.alias,
          id: data.id,
          mount: data.mount,
          radius: 15000,
          center: { lng: data.lng, lat: data.lat },
          host: data.host,
          loraChannel: data.loraChannel,
          status: data.status,
          mqttTopic: data.mqttTopic
        })
      }
    })
    this.$message({
      message: '加载挂载点数据成功',
      type: 'success'
    })
    this.mqtt = mqtt.connect('ws://182.92.228.123:8083/mqtt', {
      port: 8083,
      clientId: 'webadmin',
      username: 'webadmin',
      password: 'webadmin',
      clean: false
    })
  },
  methods: {
    clickCircle(index) {
      // 清空实时状态数据
      this.infodata = {}
      this.mqttdata = {}
      this.selectmount = {}
      if (this.mqtt.connected) {
        try {
          this.client.end()
          this.client = {
            connected: false
          }
          console.log('Successfully disconnected!')
        } catch (error) {
          console.log('Disconnect failed', error.toString())
        }
      }
      this.selecttopic = ''
      // 选定挂载点，更新挂载点面板数据
      this.selectmount = this.circles[index]
      this.selecttopic = '$c' + this.selectmount.mount + '/pub'
      var topic = this.selecttopic

      this.$message({
        message: '选择了挂载点' + this.selectmount.mount,
        type: 'success'
      })

      console.log(topic)
      this.mqtt.on('connect', (e) => {
        this.mqtt.subscribe(topic, { qos: 0 }, (error) => {
          if (!error) {
            console.log('sub success')
          }
        })
      })

      this.mqtt.on('message', (topic, message) => {
        if (message.toString().startsWith('trace=p')) {
          var msg = message.toString()
          var hash
          var myJson = {}
          var hashes = msg.slice(msg.indexOf('?') + 1).split('&')
          for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=')
            myJson[hash[0]] = hash[1]
          }

          this.mqttdata = myJson
          this.mqttdata.ts = moment(this.mqttdata.ts * 1000).format(
            'YYYY-MM-DD HH:mm:ss'
          )

          this.infodata = JSON.parse(myJson.params).info
          this.infodata['net1'] = this.infodata['4g1']
          this.infodata['net2'] = this.infodata['4g2']
        }
      })
    }
  }
}

// console.log(e.target);
// this.circles.push({
//   center: {
//     lng: e.Ag.lng,
//     lat: e.Ag.lat,
//   },
// });
// console.log(this.circles);
</script>

<style  scoped>
.bm-view {
  width: 100%;
  height: 800px;
}
</style>
